<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
        margin:0;
    }
     canvas{
        display: block;
        margin:0 auto;
        border:1px red solid;
    }
</style>
</head>
<body>
	<canvas id="canvas"></canvas>
</body>
<script>
	var	canvas = document.querySelector("#canvas");
	var ctx = canvas.getContext("2d");
	canvas.width = 800;
    canvas.height = 600;

	function cycleMove(a,b,c,d,e){

	//先画个圆
	var x = a;
	var y = b;
	var r = c;
	

	function drawArc(x,y,r){
	    ctx.clearRect(0,0,canvas.width,canvas.height);
	    ctx.beginPath();
	    ctx.arc(x,y,r,0,Math.PI*2);
	    ctx.fillStyle = "blue";
	    ctx.fill();
	    ctx.closePath();
	}
	
	//移动碰撞
	var speedX = d;
	var	speedY = e;
	function move(){

        if(x+r+speedX > canvas.width || x-r+speedX < 0){
            speedX = -speedX;
        }
        if(y+r+speedY > canvas.height || y-r+speedY < 0){
            speedY = -speedY;
        }


        x += speedX;
        y += speedY;
		
        drawArc(x,y,r);
        window.requestAnimationFrame(move)
    }
    move();

	
}
	cycleMove(500,500,30,5,5);

</script>
</html>